<template>
  <div v-if="showIndex < 2 || showIndex === 3" class="container">
    <div v-if="showIndex <= 2" class="splash-view splash-img-box">
      <img
        :src="imgs[0]"
        class="splash-img splash-transition"
        :class="[showIndex === 0 ? '' : 'opacity-0']"
      />
    </div>
    <div v-if="showIndex <= 2" class="splash-view splash-img-box">
      <img
        :src="imgs[1]"
        class="splash-img splash-transition"
        :class="[showIndex === 1 ? '' : 'opacity-0']"
      />
    </div>
    <index @to-result="onGoResult" v-show="showIndex === 3"></index>
  </div>
  <div
    v-else-if="showIndex === 2"
    class="splash-view splash-transition"
    :class="[showIndex === 2 ? '' : 'opacity-0']"
  >
    <div class="guide-view">
      <p class="text-title">心动讯号</p>
      <p class="text-title-en">HEARTBEAT</p>
      <div class="layout-center">
        <img src="../assets/05/heart-beat-hot.gif" style="width: 100%;" />
        <img src="../assets/02/heart-word.png" style="width: 1.4rem" />
      </div>
      <div v-if="showIndex === 2" class="layout-bottom" @click="showIndex = 3">
        <div class="text-bottom">点击倾听</div>
        <div class="text-bottom">爱人的心动讯号</div>
        <div>
          <img src="../assets/02/press.gif" class="icon-press" />
        </div>
        <div>
          <img src="../assets/02/logo.png" class="icon-logo" />
        </div>
      </div>
    </div>
  </div>
  <result :result="resultInfo" v-else-if="showIndex === 4"></result>
</template>
<script>
import index from "./index";
import result from "./result";
export default {
  components: {
    index,
    result
  },
  data() {
    return {
      showIndex: -1,
      imgs: [require("../assets/01/01.png"), require("../assets/01/02.png")],
      resultInfo: {}
    };
  },
  mounted() {
    this.showIndex = 0;
    setTimeout(() => {
      this.showIndex = 1;
      setTimeout(() => {
        // show
        this.showIndex = 2;
      }, 1000);
    }, 1000);
  },
  methods: {
    onGoResult(e) {
      this.showIndex = 4;
      this.resultInfo = e;
    }
  }
};
</script>
<style scoped>
.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../assets/01/bg.png);
  background-repeat: no-repeat;
  display: flex;
}
.splash-img {
  width: 100%;
  /* z-index: 1; */
}
.guide-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 10vh;
  background: #000;
  align-content: center;
}
.text-title {
  font-size: 0.72rem;
  color: #fff;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0.2rem;
}
.text-title-en {
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0.2rem;
}
.text-bottom {
  color: #fff;
  font-size: 0.36rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.4em;
}
.splash-transition {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 500ms;
}
.opacity-0 {
  opacity: 0;
}
.splash-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
.splash-img-box {
  justify-content: flex-end;
}
.layout-center {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.23rem;
}
.layout-bottom {
  margin-top: 6.5vh;
  margin-bottom: 8vh;
}
.icon-press {
  width: 2.16rem;
  margin-top: 0.24rem;
}
.icon-logo {
  width: 1.16rem;
  margin-top: 0.24rem;
}
</style>
